<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG Clock</title>
        <style>
            #root {
                margin:auto;
                max-width:600px;
                width:100%;
            }
        </style>
    </head>
    <body>
        <div id="root">
          <!-- The svg can be placed as is.  -->
          <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g transform="translate(150,150)">
                <g>
                    <circle fill="none" r="108" stroke="gray" stroke-width="4"></circle>
                    <circle fill="none" r="97" stroke="black" stroke-dasharray="4,46.789082" stroke-width="11" transform="rotate(-1.5)"></circle>
                    <circle fill="none" r="100" stroke="black" stroke-dasharray="2,8.471976" stroke-width="5" transform="rotate(-.873)"></circle>
                </g>
                <g id="hands" transform="rotate(180)">
                    <g id="hour"></g>
                    <g id="minute"></g>
                    <g id="second"></g>
                </g>
            </g>
          </svg>
        </div>

        <script type="text/javascript" src="../lib/incremental-dom.js"></script>
        <script type="text/javascript" src="../src/cotonic.tokenizer.js"></script>
        <script type="text/javascript" src="../src/cotonic.idom.js"></script>
        <script type="text/javascript" src="../src/cotonic.ui.js"></script>

        <script>
            function second_hand(date) {
                const angle = date.getSeconds() * 6;

                // Return svg snippet
                return `<g transform="rotate(${angle})">
                    <line stroke="red" stroke-linecap="round" stroke-width="2" y1="-20" y2="102"></line>
                    <circle fill="blue" r="4"></circle>
                </g>`;
            }

            function minute_hand(date) {
                const angle = date.getMinutes() * 6;

                return `<g transform="rotate(${angle})">
                    <line opacity=".9" stroke="green" stroke-linecap="round" stroke-width="4" y2="93"></line>
                    <circle fill="red" r="6"></circle>
                </g>`;
            }

            function hour_hand(date) {
                const angle = (date.getHours() % 12) * 30 + date.getMinutes() / 2;

                return `<g transform="rotate(${angle})">
                    <line opacity=".5" stroke="blue" stroke-linecap="round" stroke-width="5" y2="75"></line>
                    <circle r="7"></circle>
                </g>`;
            }

                
            function init() {
                let date = new Date();
                cotonic.ui.insert("second", true, second_hand(date), 10);
                cotonic.ui.insert("minute", true, minute_hand(date), 10);
                cotonic.ui.insert("hour", true, hour_hand(date), 10);
            }

            /* Update the clock every second */
            setInterval(function() {
                let date = new Date();
                cotonic.ui.update("second", second_hand(date));
                cotonic.ui.update("minute", minute_hand(date));
                cotonic.ui.update("hour", hour_hand(date));
            }, 1000);

            /* The rendering itself can be done separately */
            init()

        </script>
    </body>
</html>
